




<html>
<title>Upload Route</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<body onLoad="goma()">

<div id="mappy" style="width:80%; height:550px; float:left; padding:10px"></div>

<!-- thought I would need this, but it didn't help.  div id="sidebar" style="float:left; padding:10px"></div> -->
                  <div style="width:100%; text-align:center; margin:0px auto 0px auto; margin-top:10px;">
	                  <br />
                  <p style="text-align:left"> Navigate to:
                  <input type="text" id="address" value=""/>
                  <button onclick="search();">Go</button>
                  </p>
<br/>
Legend<br>
Route colors:<br>
<FONT COLOR="Forestgreen">Offroad</FONT><br>
<FONT COLOR="Deepskyblue">Casual</FONT><br>
<FONT COLOR="Orangered">Touring</FONT><p>

<input type="button" value="Upload Last Route on Map" onClick="fetch_waypoints()">
<p>

ToDo: Include some filtering criteria to display specific routes on the map.<p>

<form action="UploadMaps.php" method="post">
<input type="submit" name="formSubmit" value="View Routes on Map" />
</form>



<script src="json2.js"></script>
<script src="process.php"></script>

<script>
var map, ren, ser;
var data = {};
function goma()
{
	// set up all the options for the map
	var Fargo = new google.maps.LatLng(46.877186,-96.789803);
    var myOptions = {
	    center: Fargo,
		zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // create a map
    map = new google.maps.Map(document.getElementById("mappy"), myOptions);

	ren = new google.maps.DirectionsRenderer( {'draggable':true} );
	ren.setMap(map);
	ser = new google.maps.DirectionsService();
	//fetch_waypoints();
}

function setroute(os)
{
	var wp = [];
	for(var i=0;i<os.waypoints.length;i++)
		wp[i] = {'location': new google.maps.LatLng(os.waypoints[i][0], os.waypoints[i][1]),'stopover':false }

	ser.route({'origin':new google.maps.LatLng(os.start.lat,os.start.lng),
	'destination':new google.maps.LatLng(os.end.lat,os.end.lng),
	'waypoints': wp,
	'travelMode': google.maps.DirectionsTravelMode.BICYCLING},function(res,sts) {
		if(sts=='OK')ren.setDirections(res);
	})
}

function fetch_waypoints()
{
	var jax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
	jax.open('POST','process.php');
	jax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	jax.send('command=fetch');
	jax.onreadystatechange = function(){ if(jax.readyState==4) {
		try { setroute( eval('(' + jax.responseText + ')') ); }
		catch(e){ alert(e); }
	}}
}

var geocoder = new google.maps.Geocoder();
function search()
{
	var address = document.getElementById("address").value;
	geocoder.geocode( { 'address': address}, function(results, status) {
    	if (status == google.maps.GeocoderStatus.OK) {
      		map.setCenter(results[0].geometry.location);
			map.setZoom(15);
    	} else {
       		alert("Geocode was not successful for the following reason: " + status);
    	}
    });
}
</script>
</body>
</html>



